<template>
  <div id='container' style="width: 100%;height:60vh">
    <div class="absolute z-50">
      <el-select v-model="region.province" placeholder="请选择省份">
        <el-option
            v-for="item in region.provinceList"
            :key="item.adcode"
            :label="item.name"
            :value="`${item.name},${item.adcode}`"
        >
        </el-option>
      </el-select>
      <el-select v-model="region.city" placeholder="请选择城市">
        <el-option
            v-for="item in region.cityList"
            :key="item.adcode"
            :label="item.name"
            :value="`${item.name},${item.adcode}`"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch, watchEffect} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";


const region = reactive({
  province: "",
  city: "",
  provinceList: [],
  cityList: [],
  districtList: []
})


loadAMap()

function loadAMap() {
  AMapLoader.load({ //首次调用 load
    key: 'c8a9740cace176f2a6ce15cfe330d357',//首次load key为必填
    version: '2.0',
    plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geocoder', 'AMap.DistrictSearch']
  }).then(async (AMap) => {
    const map = new AMap.Map('container', {
      viewMode: '3D',
      zoom: 11
    });

    map.addControl(new AMap.Scale())
    map.addControl(new AMap.ToolBar())
    map.add(new AMap.Marker({
      position: map.getCenter()
    }));

    const info = await getRegionByMap(map)

    region.province = info?.province
    region.city = info?.city

    const regionList = await getRegionList()
    region.provinceList = getProvinceList(regionList)
    region.cityList = getCityList(info.province)

  }).catch(e => {
    console.error(e.message);
  })

}

function getRegionList() {
  return new Promise((resolve, reject) => {
    new AMap.DistrictSearch({
      subdistrict: 3,   //返回下一级行政区
      extensions: 'base',  //返回行政区边界坐标组等具体信息
      showbiz: false  //最后一级返回街道信息
    }).search(parent, (status, result) => {
      if (status === 'complete' && result.info === 'OK') {
        resolve(result)
      } else {
        reject(status)
      }
    })
  })
}

function getRegionByMap(map) {
  return new Promise(resolve => {
    map.getCity((info) => {
      resolve(info)
    })
  })
}


function getProvinceList(result) {
  return result.districtList[0].districtList
}

function getCityList(provinceName) {
  const province = region.provinceList.find((province) => {
    return province.name === provinceName
  })
  return province?.districtList
}

function getDistrictList(cityName) {
  const city = region.cityList.find((city) => {
    return city.name === cityName
  })
  return city?.districtList
}

watch(() => region.province, (newVal, oldVal) => {
  if (newVal && oldVal) {
    const provinceName = newVal.split(',')[0]
    region.cityList = getCityList(provinceName)
    region.city = ""
    console.log(region.cityList);
  }
})
watch(() => region.city, (newVal, oldVal) => {
  if (newVal) {
    const cityName = region.city.split(',')[0]
    region.districtList = getDistrictList(cityName)
    console.log(111, region.districtList)
  }
})


</script>

<style lang="less" scoped>

</style>
